<template>
  <div class="app-container">
    <div class="block">
      <el-row :gutter="20">
        <el-col :span="6">
          <el-input v-model="queryParams.name" placeholder="店铺名称" />
        </el-col>
        <el-col :span="6">
          <el-button
            type="success"
            icon="el-icon-search"
            @click.native="refreshList"
          >搜索</el-button>
          <el-button
            type="primary"
            icon="el-icon-refresh"
            @click.native="reset"
          >重置</el-button>
        </el-col>
      </el-row>
      <br>
      <div class="table_container">
        <el-table :data="shopsData" style="width: 100%" border>
          <el-table-column type="expand">
            <template slot-scope="props">
              <el-form label-position="left" inline class="demo-table-expand">
                <el-form-item label="店铺名称">
                  <span>{{ props.row.name }}</span>
                </el-form-item>
                <el-form-item label="店铺地址">
                  <span>{{ props.row.address }}</span>
                </el-form-item>
                <el-form-item label="店铺介绍">
                  <span>{{ props.row.description }}</span>
                </el-form-item>
                <el-form-item label="店铺ID">
                  <span>{{ props.row.restaurantId }}</span>
                </el-form-item>
                <el-form-item label="联系电话">
                  <span>{{ props.row.phone }}</span>
                </el-form-item>
                <el-form-item label="评分">
                  <span>{{ props.row.rating }}</span>
                </el-form-item>
                <el-form-item label="总销量">
                  <span>{{ props.row.totalOrderNum }}</span>
                </el-form-item>
                <el-form-item label="月销量">
                  <span>{{ props.row.mouthOrderNum }}</span>
                </el-form-item>
                <el-form-item label="起送费">
                  <span>{{ props.row.minDeliveryPrice }}</span>
                </el-form-item>
                <el-form-item label="配送费">
                  <span>{{ props.row.deliveryPrice }}</span>
                </el-form-item>
                <el-form-item label="均价">
                  <span>{{ props.row.averagePrice }}</span>
                </el-form-item>
                <el-form-item label="分类">
                  <span>{{ getCategoryName(props.row.categoryId) }}</span>
                </el-form-item>
                <el-form-item label="店铺图片">
                  <el-image
                    style="width: 100px; height: 100px"
                    :src="props.row.imagePath"
                    fit="contain"></el-image>
                </el-form-item>
              </el-form>
            </template>
          </el-table-column>
          <el-table-column label="店铺名称" prop="name" />
          <el-table-column label="店铺地址" prop="address" />
          <el-table-column label="店铺介绍" prop="description" />
          <el-table-column label="店铺状态" prop="checkState">
            <template slot-scope="scope">
              <el-tag v-if="scope.row.checkState === 1" type="success" size="small">已审核</el-tag>
              <el-tag v-if="scope.row.checkState !== 1" type="danger" size="small">未审核</el-tag>
              <el-button v-if="scope.row.checkState !== 1" size="mini" @click="verified(scope.row)" style="margin-left: 10px">审核通过</el-button>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="350">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="primary"
                @click="handleEdit(scope.$index, scope.row)"
              >编辑
              </el-button>
              <el-button
                size="mini"
                type="success"
                :disabled="scope.row.checkState !== 1"
                @click="addFood(scope.$index, scope.row)"
              >添加食品
              </el-button>
              <el-button
                size="mini"
                type="info"
                :disabled="scope.row.checkState !== 1"
                @click="viewFood(scope.$index, scope.row)"
              >查看食品
              </el-button>
              <el-button
                v-if="scope.row.checkState === 1"
                size="mini"
                type="danger"
                @click="disableRestaurant(scope.$index, scope.row)"
              >下架
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <!--        <el-pagination-->
        <!--          background-->
        <!--          layout="total, sizes, prev, pager, next, jumper"-->
        <!--          :page-sizes="[10, 20, 50, 100, 500]"-->
        <!--          :page-size="listQuery.limit"-->
        <!--          :total="total"-->
        <!--          @size-change="changeSize"-->
        <!--          @current-change="fetchPage"-->
        <!--          @prev-click="fetchPrev"-->
        <!--          @next-click="fetchNext"-->
        <!--        />-->
        <pagination
          v-show="total > 0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="refreshList" />
        <el-dialog title="修改店铺信息" :visible.sync="dialogFormVisible">
          <el-form :model="selectTable">
            <el-form-item label="店铺名称" label-width="100px">
              <el-input
                v-model="selectTable.name"
                auto-complete="off"
              />
            </el-form-item>

            <el-form-item label="详细地址" label-width="100px">
              <!--              <el-autocomplete-->
              <!--                v-model="address.address"-->
              <!--                :fetch-suggestions="querySearchAsync"-->
              <!--                placeholder="请输入地址"-->
              <!--                style="width: 100%;"-->
              <!--                @select="addressSelect"-->
              <!--              />-->
              <!--              <span>当前城市：{{ city.name }}</span>-->
              <el-input
                v-model="selectTable.address"
                auto-complete="off"
              />
            </el-form-item>
            <el-form-item label="店铺介绍" label-width="100px">
              <el-input v-model="selectTable.description" />
            </el-form-item>
            <el-form-item label="联系电话" label-width="100px">
              <el-input v-model="selectTable.phone" />
            </el-form-item>
            <el-form-item label="店铺分类" label-width="100px">
              <el-select
                v-model="selectTable.categoryId"
                placeholder="请选择种类"
              >
                <el-option
                  v-for="item in navigates"
                  :key="item.navigateId"
                  :label="item.title"
                  :value="item.navigateId"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="配送费" label-width="100px" prop="float_delivery_fee">
              <el-input-number
                v-model="selectTable.deliveryPrice"
                :min="0"
                :max="20"
              />
            </el-form-item>
            <el-form-item label="起送价" label-width="100px" prop="float_minimum_order_amount">
              <el-input-number
                v-model="selectTable.minDeliveryPrice"
                :min="0"
                :max="100"
              />
            </el-form-item>
            <el-form-item label="商铺图片" label-width="100px">
              <!--              <el-upload-->
              <!--                class="avatar-uploader"-->
              <!--                :action="fileMgrUrl"-->
              <!--                :headers="uploadHeaders"-->
              <!--                :show-file-list="false"-->
              <!--                :on-success="handleServiceAvatarScucess"-->
              <!--                :before-upload="beforeAvatarUpload"-->
              <!--              >-->
              <!--                <img-->
              <!--                  v-if="selectTable.imagePath"-->
              <!--                  :src="selectTable.image"-->
              <!--                  class="avatar"-->
              <!--                >-->
              <!--                <i v-else class="el-icon-plus avatar-uploader-icon"></i>-->
              <el-upload
                action="#"
                :on-change="handleChange"
                :auto-upload="false"
                :on-preview="handlePreview"
                list-type="picture-card"
                :on-remove="handleRemove"
                :on-success="onSuccess">
                <i slot="default" class="el-icon-plus"></i>
                <!--                <div slot="file" slot-scope="{file}">-->
                <!--                  <img-->
                <!--                    class="el-upload-list__item-thumbnail"-->
                <!--                    :src="file.url" alt=""-->
                <!--                  >-->
                <!--                  <span class="el-upload-list__item-actions">-->
                <!--                    <span-->
                <!--                      class="el-upload-list__item-preview"-->
                <!--                      @click="handlePictureCardPreview(file)"-->
                <!--                    >-->
                <!--                      <i class="el-icon-zoom-in"></i>-->
                <!--                    </span>-->
                <!--                    <span-->
                <!--                      v-if="!disabled"-->
                <!--                      class="el-upload-list__item-delete"-->
                <!--                      @click="handleDownload(file)"-->
                <!--                    >-->
                <!--                      <i class="el-icon-download"></i>-->
                <!--                    </span>-->
                <!--                    <span-->
                <!--                      v-if="!disabled"-->
                <!--                      class="el-upload-list__item-delete"-->
                <!--                      @click="handleRemove(file)"-->
                <!--                    >-->
                <!--                      <i class="el-icon-delete"></i>-->
                <!--                    </span>-->
                <!--                  </span>-->
                <!--                </div>-->
              </el-upload>
              <el-dialog :visible.sync="dialogVisible">
                <img width="100%" :src="selectTable.imagePath" alt="">
              </el-dialog>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="modifyShop">确 定</el-button>
          </div>
        </el-dialog>
      </div>
    </div>
  </div>
</template>

<script>
import {
  getAllNavigates,
  getAllRestaurants,
  removeRestaurant,
  updateRestaurant,
  updateRestaurantState
} from '../../api/ec/shops'
import { uploadImg } from '../../api/ec/img'

export default {
  name: 'ShopCheck',
  data() {
    return {
      queryParams: {
        pageNum: 1,
        pageSize: 20,
        restaurantId: null,
        name: null,
        address: null,
        imagePath: null,
        description: null,
        rating: null,
        checkState: null,
        categoryId: null,
        phone: null,
        totalOrderNum: null,
        mouthOrderNum: null,
        minDeliveryPrice: null,
        deliveryPrice: null,
        averagePrice: null,
        communityId: 0
      },
      dialogVisible: false,
      disabled: false,
      city: {},
      count: 0,
      fileMgrUrl: '/file',
      uploadHeaders: {
        Authorization: ''
      },
      shopsData: [
        {
          name: '效果演示',
          address: '广东省广州市越秀区中山五路219号华联购物中心F1',
          id: '1',
          phone: 13437850035,
          category: '快餐便当/简餐',
          recent_order_num: '106',
          rating: '4.7',
          image_path: '164ad0b6a3917599.jpg',
          description: 'sad'
        },
        {
          name: '兰兰',
          address: '上海市静安区秣陵路303号',
          id: '3269',
          phone: '18975485874aaa',
          category: '特色菜系',
          recent_order_num: '100',
          rating: '5',
          image_path: '16a8ad5e69035582.jpg',
          description: '兰兰店铺小吃店好火哦saasss'
        },
        {
          name: 'test8090',
          address: '上海市浦东新区周浦镇年家34252345浜路336-2号(近康沈路)',
          id: '3276',
          phone: '3ffffffffff',
          category: '小吃夜宵/烧烤',
          recent_order_num: '831',
          rating: '4.1',
          image_path: '16a879e258d35111.jpg',
          description: '8:30asdfasdfsda发发发34512'
        },
        {
          name: '我的牛肉面哦哦5555',
          address: '北京市顺义区 ',
          id: '3278',
          phone: '1814222222222',
          category: '异国料理/全部异国料理',
          recent_order_num: '601',
          rating: '4.3',
          image_path: '16a9a976eb038849.jpg',
          description: '1111111111'
        },
        {
          name: '钱王拳王仙下乡',
          address: '四川省成都市锦江区静安路5号',
          id: '3281',
          phone: '133333333',
          category: '甜品饮品/甜品',
          recent_order_num: '636',
          rating: '4.6',
          image_path: '16a4332789632586.jpg',
          description: '非诚勿扰22233333反反复复付付付付付'
        },
        {
          name: '旧电脑不可能靠',
          address: '北京市东城区毛家湾胡同甲13号',
          id: '3283',
          phone: '13413578954ggggggggggg',
          category: '果蔬生鲜/蔬菜',
          recent_order_num: '54',
          rating: '4.3',
          image_path: '169dc38cebe30265.jpg',
          description: '12333333333331``````````232323uuuuuuuuuuuuuuuuuuuuuu'
        },
        {
          name: '肯德基12217777',
          address: '北京市朝阳区建国路18号(珠江绿洲家园内)',
          id: '3284',
          phone: '13555222',
          category: '果蔬生鲜/蔬菜',
          recent_order_num: '547',
          rating: '4.4',
          image_path: '1678748388a23409.jpg',
          description: '徐帆'
        },
        {
          name: '哈哈死亡诗社7777',
          address: '园山街道荷坳社区桂坪路68号厂房2栋一层05号',
          id: '3295',
          phone: '11111111111方式方法付',
          category: '果蔬生鲜,水果',
          recent_order_num: '885',
          rating: '4.2',
          image_path: '16a4375cd3232590.png',
          description: 'jajajjaj666'
        },
        {
          name: '切磋',
          address: '地铁11号线支线,地铁11号线,地铁16号线',
          id: '3298',
          phone: '15421452144',
          category: '果蔬生鲜/蔬菜',
          recent_order_num: '57',
          rating: '4.6',
          image_path: '169575dfe3128319.jpg',
          description: ''
        },
        {
          name: '快乐点餐',
          address: '安徽省滁州市琅琊区天长西路54号苏宁广场负1层',
          id: '3301',
          phone: '13888888888',
          category: '甜品饮品',
          recent_order_num: '32',
          rating: '4.8',
          image_path: '16a96313efb38079.jpg',
          description: ''
        },
        {
          name: '为133128',
          address: '浙江省宁波市象山县步东路26号',
          id: '3303',
          phone: '110',
          category: '快餐便当/米粉面馆',
          recent_order_num: '756',
          rating: '4.8',
          image_path: '16a6475e88c33897.jpg',
          description: '1233444444444444'
        },
        {
          name: 'a2',
          address: '陕西省西安市未央区太华北路',
          id: '3305',
          phone: '100',
          category: '快餐便当/简餐',
          recent_order_num: '67',
          rating: '4.7',
          image_path: '1675e44182b22953.png',
          description: '123123123'
        },
        {
          name: '12312312',
          address: '上海市徐汇区宜山路455号光启城时尚购物中心4层',
          id: '3307',
          phone: '12345678999',
          category: '鲜花蛋糕/鲜花',
          recent_order_num: '166',
          rating: '5',
          image_path: '16a6476344433898.jpg',
          description: 'regvbeqgb'
        },
        {
          name: '奔跑的丸',
          address: '北京市东城区东单大华路1号',
          id: '3308',
          phone: '7298328903ssss',
          category: '小吃夜宵/烧烤',
          recent_order_num: '654',
          rating: '4.9',
          image_path: '1675e7cf53222965.png',
          description: '我是你爸爸ssss'
        },
        {
          name: '修改',
          address: '湖北省武汉市武昌区铁机路',
          id: '3313',
          phone: '123',
          category: '果蔬生鲜/蔬菜',
          recent_order_num: '669',
          rating: '4.8',
          image_path: '1684730298525487.jpg',
          description: '1555'
        },
        {
          name: '麦当劳',
          address: '北京市海淀区 ',
          id: '3321',
          phone: '13457834890',
          category: '快餐便当/盖浇饭',
          recent_order_num: '476',
          rating: '5',
          image_path: '169dd3cc4c130296.jpg',
          description: '哈哈哈'
        },
        {
          name: '小世界书吧',
          address: '上海市松江区人民北路2999号',
          id: '3324',
          phone: '13093459631',
          category: '甜品饮品/咖啡',
          recent_order_num: '837',
          rating: '4.3',
          image_path: '16a494a4a7333313.jpg',
          description: '东华大学小世界书吧'
        },
        {
          name: '123',
          address: '湖北省武汉市武昌区洪山路81号门前广场洪山广场B2',
          id: '3325',
          phone: '123',
          category: '特色菜系/江浙菜',
          recent_order_num: '117',
          rating: '4.7',
          image_path: '16aaedc63a039561.jpg',
          description: ''
        },
        {
          name: '12',
          address: '上海市虹口区七浦路133号上海兴旺国际服装城B1',
          id: '3329',
          phone: '12312',
          category: '快餐便当/简餐',
          recent_order_num: '10',
          rating: '4.4',
          image_path: '167e42133a524639.jpg',
          description: '21312'
        },
        {
          name: '小世界书吧',
          address: '上海市徐汇区梅陇十一村96-1',
          id: '3340',
          phone: '1111111',
          category: '异国料理/西餐',
          recent_order_num: '819',
          rating: '4.4',
          image_path: '167736791fd23178.jpg',
          description: '222222'
        },
        {
          name: '666',
          address: '北京市通州区马驹桥镇小周易村6号院',
          id: '3342',
          phone: '1223',
          category: '小吃夜宵/地方小吃',
          recent_order_num: '432',
          rating: '4.7',
          image_path: '169c86dbc6a30078.png',
          description: '23'
        },
        {
          name: '55555',
          address: '江苏省苏州市张家港市 ',
          id: '3345',
          phone: '3',
          category: '异国料理/日韩料理',
          recent_order_num: '487',
          rating: '4.1',
          image_path: '167746075eb23195.jpg',
          description: '32'
        },
        {
          name: '43543534t4353',
          address: '北京市朝阳区酒仙桥路14号兆维51号楼兆维华灯大厦A1区3门A316',
          id: '3346',
          phone: '423424234234234',
          category: '异国料理/西餐',
          recent_order_num: '114',
          rating: '4.1',
          image_path: '16a5db1263933782.png',
          description: '34234234'
        },
        {
          name: 'asd',
          address: '广东省广州市天河区龙洞步行街15-之2号附近',
          id: '3352',
          phone: '123',
          category: '快餐便当/简餐',
          recent_order_num: '205',
          rating: '4',
          image_path: '167785404c923224.png',
          description: 'dfs'
        },
        {
          name: '测试商铺',
          address: '安徽省合肥市包河区徽州大道与绕城高速交叉口东北',
          id: '3360',
          phone: '15105651234',
          category: '快餐便当/简餐',
          recent_order_num: '303',
          rating: '4.8',
          image_path: '167799f2a4e23249.png',
          description: '111'
        },
        {
          name: 'ddeq',
          address: '广东省深圳市盐田区深盐路与海山路交汇处西南角(区政府对面)',
          id: '3367',
          phone: '1213434',
          category: '快餐便当/简餐',
          recent_order_num: '722',
          rating: '4.4',
          image_path: '16779b656d323252.jpg',
          description: 'awewq'
        }
      ],
      currentPage: 1,
      selectTable: {},
      dialogFormVisible: false,
      categoryOptions: [],
      selectedCategory: [],
      address: {},
      total: 0,
      listQuery: {
        page: 1,
        limit: 20,
        name: undefined
      },
      navigates: [],
      shopImgFile: null
    }
  },
  mounted() {
    getAllRestaurants(this.queryParams).then(response => {
      this.shopsData = response.rows
      this.total = response.total
      console.log(this.shopsData)
    })
    getAllNavigates().then(response => {
      this.navigates = response
    })
  },
  methods: {
    handleChange(file) {
      this.shopImgFile = file.raw
      const form = new FormData()
      form.append('file', this.shopImgFile)
      uploadImg(form).then(response => {
        console.log('response')
        console.log(response)
        this.selectTable.imagePath = response.data
      })
      console.log(file)
    },
    handlePreview(file) {
      console.log(file)
    },
    onSuccess(response) {
      console.log('response')
      console.log(response)
    },
    handleRemove(file) {
      console.log(file)
    },
    refreshList() {
      getAllRestaurants(this.queryParams).then(response => {
        console.log(response)
        this.shopsData = response.rows
        this.total = response.total
      })
    },
    handlePictureCardPreview(file) {
      this.selectTable.imagePath = file.url
      this.dialogVisible = true
    },
    handleDownload(file) {
      console.log(file)
    },
    getCategoryName(id) {
      return this.navigates.find(item => item.navigateId === id).title
    },
    verified(shop) {
      shop.checkState = 1
      updateRestaurantState(shop).then(response => {
        if (response.code === 200) {
          this.$message.success('更新成功')
        } else {
          this.$message.error('更新失败')
        }
      })
      this.dialogFormVisible = false
    },
    handleEdit(index, row) {
      this.selectTable = row
      console.log(this.selectTable)
      // this.selectTable.image =
      //   getApiUrl() + '/file/getImgStream?fileName=' + row.image_path
      this.dialogFormVisible = true
    },
    disableRestaurant(index, row) {
      this.selectTable = row
      this.selectTable.checkState = 0
      updateRestaurantState(this.selectTable).then(response => {
        if (response.code === 200) {
          this.$message.success('更新成功')
        } else {
          this.$message.error('更新失败')
        }
      })
    },
    handleDeleteRestaurant(index, row) {
      this.$confirm('此操作将删除该申请, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        removeRestaurant(row.restaurantId).then(response => {
          if (response.code === 200) {
            this.$message.success('删除成功')
          } else {
            this.$message.error('删除失败')
          }
        })
        this.refreshList()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    addFood(index, row) {
      this.$router.push({
        path: '/eCommerce/foodAdd',
        query: { restaurantId: row.restaurantId }
      })
    },
    viewFood(index, row) {
      this.$router.push({
        path: '/eCommerce/food',
        query: { restaurantId: row.restaurantId }
      })
    },
    modifyShop() {
      updateRestaurant(this.selectTable).then(response => {
        if (response.code === 200) {
          this.$message.success('更新成功')
        } else {
          this.$message.error('更新失败')
        }
      })
    }
  }
}
</script>

<style scoped>
  /deep/.demo-table-expand {
    font-size: 0;
  }

  /deep/.demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }

  /deep/.demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }

  /deep/.table_container {
    padding: 20px;
  }

  .Pagination {
    display: flex;
    justify-content: flex-start;
    margin-top: 8px;
  }

  /deep/.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  /deep/.avatar-uploader .el-upload:hover {
    border-color: #20a0ff;
  }

  /deep/.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 120px;
    height: 120px;
    line-height: 120px;
    text-align: center;
  }

  /deep/.avatar {
    width: 120px;
    height: 120px;
    display: block;
  }
</style>
